<template>
  <view class="container" style="padding-bottom: 100px; background-color: #fff" v-if="isLoaded">
    <!-- 表单 -->
    <view class="content">
      <form class="l-form">
        <uni-section title="未点餐时设置" titleColor="#f3c45d">
          <template #decoration>
            <view class="decoration"></view>
          </template>
        </uni-section>

        <view class="l-form-item">
          <view class="l-lbl" style="width: 200rpx">未点餐时展示 :</view>
          <view class="l-form-right" style="padding-top: 3px">轮播广告图</view>
        </view>
        <view class="l-form-item">
          <view class="l-lbl" style="width: 280rpx">轮播图切换时间间隔:</view>
          <!-- <radio-group class="l-form-right" @change="radioUnOrderIntervalChange">
            <label style="margin-right: 30rpx">
              <radio :value="1" :checked="form.unOrderInterval == 1" />
              <text>3s</text>
            </label>
            <label style="margin-right: 30rpx">
              <radio :value="2" :checked="form.unOrderInterval == 2" />
              <text>5s</text>
            </label>
            <label>
              <radio :value="3" :checked="form.unOrderInterval == 3" />
              <text>15s</text>
            </label>
          </radio-group> -->
          <u-radio-group v-model="form.unOrderInterval">
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="3s" :name="1"></u-radio>
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="5s" :name="2"></u-radio>
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="15s" :name="3"></u-radio>
          </u-radio-group>
        </view>
        <view class="l-form-item">
          <view class="l-lbl">轮播图上传 :</view>
          <view class="l-form-right">
            <LiUploadImg :imgFiles="form.unOrderImagesObj" :rangeKey="'url'" @afterChooseImage="afterChooseImage($event)" @deleteImg="deleteImg($event)" />
          </view>
        </view>
        <view style="height: 40rpx"><!-- 占位符 --></view>
        <uni-section title="点餐时设置" titleColor="#f3c45d">
          <template #decoration>
            <view class="decoration"></view>
          </template>
        </uni-section>
        <view class="l-form-item">
          <view class="l-lbl">点餐时展示 :</view>
          <!-- <radio-group class="l-form-right" @change="radioOrderSetTypeChange">
            <label style="margin-right: 30rpx">
              <radio :value="1" :checked="form.orderSetType == 1" />
              <text>轮播广告图</text>
            </label>
            <label>
              <radio :value="0" :checked="form.orderSetType == 2" />
              <text>点餐内容</text>
            </label>
          </radio-group> -->
          <u-radio-group v-model="form.orderSetType">
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="轮播广告图" :name="1"></u-radio>
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="点餐内容" :name="0"></u-radio>
          </u-radio-group>
        </view>
        <view class="l-form-item">
          <view class="l-lbl" style="width: 280rpx">轮播图切换时间间隔 :</view>
          <!-- <radio-group class="l-form-right" @change="radioOrderIntervalChange">
            <label style="margin-right: 30rpx">
              <radio :value="1" :checked="form.orderInterval == 1" />
              <text>3s</text>
            </label>
            <label style="margin-right: 30rpx">
              <radio :value="2" :checked="form.orderInterval == 2" />
              <text>5s</text>
            </label>
            <label>
              <radio :value="3" :checked="form.orderInterval == 3" />
              <text>15s</text>
            </label>
          </radio-group> -->
          <u-radio-group v-model="form.orderInterval">
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="3s" :name="1"></u-radio>
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="5s" :name="2"></u-radio>
            <u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="15s" :name="3"></u-radio>
          </u-radio-group>
        </view>
        <view class="l-form-item">
          <view class="l-lbl">轮播图上传 :</view>
          <view class="l-form-right">
            <LiUploadImg :imgFiles="form.orderImagesObj" :rangeKey="'url'" @afterChooseImage="afterChooseImage1($event)" @deleteImg="deleteImg1($event)" />
          </view>
        </view>
      </form>
    </view>
    <li-bottom-btns :zIndex="10" :mode="add" v-on:btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
  </view>
</template>
<script>
import { GetScreenEdit, EditScreen } from '../../../common/api.js';
import LiUploadImg from '../../../components/li-upload-img/li-upload-img.vue';
import { uShowLoading, uHideLoading, uNavigateTo, umodal, utoast, uSetNavigationBarTitle, uNavigateBack, uPreviewImage, uSwitchTab } from '../../../utils/uniUtils.js';
import checker from '../../../common/graceChecker';
import { transfer, transferTypeEnum } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum } from '../../../constants/normalConstants.js';
import { toastIconEnum } from '../../../constants/uiConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants';
import { stringToArray } from '../../../utils/stringUtils';
export default {
  components: { LiUploadImg },
  async onLoad(options) {
    this.mode = 'edit';
    uSetNavigationBarTitle(this.subject);
  },

  async mounted() {
    try {
      uShowLoading();
      // 编辑模式
      await this.getData();
    } catch (error) {
      utoast('页面初始化失败！', 'error');
      setTimeout(() => {
        uSwitchTab('/pages/tabBar/staging');
      }, 800);
    } finally {
      this.isLoaded = true;
      uHideLoading();
    }
  },
  data() {
    return {
      modeEnum,
      subject: '副屏设置', // 主题
      rootRoute: 'workbench',
      routeName: 'tableRms',
      mode: 'add', // 模式
      isLoaded: false,
      id: null,
      /* 表单 */
      form: {
        unOrderImagesObj: [],
        orderImagesObj: []
      },
      /* 弹窗 */

      // 数据转换器
      transferRules: [],
      //表单校验规则
      rules: [],
      lock: false // 节流锁

      /* 额外数据 */

      /* 额外校验规则 */
      /* 额外转换器 */
    };
  },

  methods: {
    onBlurEvent(e) {},

    async getData() {
      const res = await GetScreenEdit();
      this.form = res.data;
    },

    async getOtherData() {
      // ..
    },

    async insertData() {},

    async delData() {},

    async editData() {
      return await EditScreen(this.form);
    },

    async btnDelClick() {
      const res = await umodal();
      // 确定删除
      if (res) {
        const result = await this.delData();
        console.log(result);
        if (result.code != null && result.code == 0) {
          await utoast('删除成功！', toastIconEnum.success);
          this.disabled = true;
          setTimeout(() => {
            uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/list`);
          }, 1000);
        } else {
          await utoast('删除失败！', toastIconEnum.error);
        }
      }
    },

    async btnEditOrSaveSubmitClick() {
      //  节流锁
      if (this.lock) {
        return;
      }

      if (!(await umodal('确认要提交吗？'))) {
        return;
      }

      // 数据转换
      // this.form = transfer(this.form, this.transferRules);

      // 表单校验
      /*       let isOk = checker.check(this.form, this.rules);
      if (!isOk) {
        await utoast(checker.error, toastIconEnum.none);
        return;
      } */

      //  提交表单
      const res = await this.editData(this.form);
      if (res?.code == 0) {
        await utoast('操作成功');
        setTimeout(() => {
          // uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/list`);
          uNavigateBack();
        }, 1000);
      } else {
        setTimeout(() => {
          this.lock = false;
        }, 2000);
      }
    },

    /* 表单事件 */
    radioUnOrderIntervalChange(e) {
      this.form.unOrderInterval = e.detail.value;
    },
    radioOrderSetTypeChange(e) {
      this.form.orderSetType = e.detail.value;
    },
    radioOrderIntervalChange(e) {
      this.form.orderInterval = e.detail.value;
    },
    afterRead() {
      console.log('afterRead');
    },
    deletePic() {
      console.log('deletePic');
    },
    /* 额外方法放下面，上面是主干方法 */
    uPreviewImage,
    async chooseImage() {
      // 判断图片是否超20
      if (this.form.orderImagesObj.length >= 20) {
        utoast('图片不能超过20张~');
        return;
      }
      // 上传
      const imgSrc = await uploadImage();
      //  回显推入
      this.form.orderImagesObj.push({
        url: imgSrc
      });
    },
    afterChooseImage(e) {
      this.form.unOrderImagesObj.push({ url: e.imgSrc });
    },
    deleteImg(e) {
      this.form.unOrderImagesObj.splice(e.idx, 1);
    },
    afterChooseImage1(e) {
      this.form.orderImagesObj.push({ url: e.imgSrc });
    },
    deleteImg1(e) {
      this.form.orderImagesObj.splice(e.idx, 1);
    }
    //方法放上面
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
.decoration {
  height: 30rpx;
  width: 4rpx;
  background-color: #f3c45d;
  border: 10rpx;
  margin-right: 20rpx;
  margin-left: -10rpx;
}
</style>
